由于有些第三方依赖包使用commonjs规范或与ES6语法一起使用,依赖包以require('xxx')方式引入的模块vite并不能将对应模块一起打包,导致浏览器报require is not defined错误。
解决思路历经多番尝试后找到了browserify编译神器,browserify打包时增加standalone选项可以生成一个UMD类型的包,它可以运行在node里,可以使用全局变量运行在浏览器里,也可以使用在AMD环境里。
使用说明将require is not defined错误的包fork到自己仓库
安装browserify
npm install browserify项目增加build/browserify.js(按照对应项目调整代码)const pkg = require('../package.json');const browserify = require('browserify');const camelCase = require('lodash.camelcase');const fs = require('fs');function getFilePath(path) {return `${__dirname}/../${path}`;}const inputFile = getFilePath(pkg.main);const outputFile = getFilePath(pkg.main).replace(/\.js$/, '.full.js');const b = browserify(inputFile, {standalone: camelCase(pkg.sourceName)});b.bundle().pipe(fs.createWriteStream(outputFile));// 拷贝d.ts